.guide-layer {
	background-color: transparent;
	pointer-events: none;

	.guide-demo {
		$backgroundColor: white;
		$borderWidth: 9px; 

		.guide-step {
			visibility: hidden;
			position: absolute;
			z-index: 99;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.23);
			background-color: $backgroundColor;

			.guide-close {
				color: #919191;
				position: absolute;
				right: 5px;
				top: 0;
				cursor: pointer;
				pointer-events: auto;
			}

			.guide-step-wrap {
				padding: 10px 15px;
			}

			.guide-title {
				margin-bottom: 10px;
				color: #fa764a;
			}

			.guide-content {
				color: #515151;
				.strong {
					color: #19c3f1;
				}
			}

			&:before {
				border: solid transparent;
				content: ' ';
				height: 0;
				width: 0;
				position: absolute;
				border-width: $borderWidth;
			}

			&.top {
				&:before {
					top: -2 * $borderWidth;
					left: calc(50% - 9px);
					border-bottom-color: $backgroundColor;
				}
			}

			&.bottom {
				&:before {
					top: 100%;
					left: calc(50% - 9px);
					border-top-color: $backgroundColor;
				}
			}

			&.left {
				&:before {
					top: calc(50% - 9px);
					left: -2 * $borderWidth;
					border-right-color: $backgroundColor;
				}
			}

			&.right {
				&:before {
					top: calc(50% - 9px);
					left: 100%;
					border-left-color: $backgroundColor;
				}
			}
		}

		&.active {
			.guide-step.active {
				visibility: visible;
			}
		}
	}
}

.guide-highlight {
	z-index: 99;
	pointer-events: none;
}

.guide-cover {
	visibility: hidden;

	&.active {
		visibility: visible;
	}

	.guide-step {
		visibility: hidden;

		&.active {
			visibility: visible;
		}

		.part {
			position: absolute;
		}
	}

	.guide-skip {
		position: absolute;
		bottom: 135px;
		right: 163px;
		width: 72px;
		height: 30px;
		background: url('../image/guide/guide-skip.png') no-repeat center;
		background-size: contain;
		cursor: pointer;
	}

	.guide-step-1 {
		.part-1 {
			top: 79px;
			left: 78px;
			width: 190px;
			height: 45px;
			background: url('../image/guide/guide-step-1-1.png') no-repeat center;
			background-size: contain;
		}

		.part-2 {
			top: 90px;
			left: 315px;
			width: 382px;
			height: 518px;
			background: url('../image/guide/guide-step-1-2.png') no-repeat center;
			background-size: contain;
		}	
	}

	.guide-step-2 {
		.part-1 {
			top: 30px;
			left: 100px;
			width: 410px;
			height: 83px;
			background: url('../image/guide/guide-step-2-1.png') no-repeat center;
			background-size: contain;
		}

		.part-2 {
			top: 140px;
			left: 160px;
			width: 392px;
			height: 213px;
			background: url('../image/guide/guide-step-2-2.png') no-repeat center;
			background-size: contain;
		}
	}

	.guide-step-3 {
		.part-1 {
			top: 27px;
			left: 117px;
			width: 334px;
			height: 120px;
			background: url('../image/guide/guide-step-3-1.png') no-repeat center;
			background-size: contain;
		}

		.part-2 {
			top: 173px;
			left: 121px;
			width: 427px;
			height: 277px;
			background: url('../image/guide/guide-step-3-2.png') no-repeat center;
			background-size: contain;
		}
	}

	.guide-step-4 {
		.part-1 {
			top: 41px;
			left: 366px;
			width: 279px;
			height: 98px;
			background: url('../image/guide/guide-step-4-1.png') no-repeat center;
			background-size: contain;
		}

		.part-2 {
			top: 170px;
			left: 365px;
			width: 289px;
			height: 93px;
			background: url('../image/guide/guide-step-4-2.png') no-repeat center;
			background-size: contain;
		}
	}

	.guide-step-5 {
		.part-1 {
			top: 48px;
			right: 40px;
			width: 278px;
			height: 131px;
			background: url('../image/guide/guide-step-5-1.png') no-repeat center;
			background-size: contain;
		}

		.part-2 {
			top: 130px;
			right: 356px;
			width: 352px;
			height: 390px;
			background: url('../image/guide/guide-step-5-2.png') no-repeat center;
			background-size: contain;
		}
	}
}